<template>
  <div>
    <div class="bz">
      <span class="demonstration">日期</span>
      <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="Start date"
        end-placeholder="End date" :size="size" />
      <el-button type="primary" round @click="dialogFormVisible = true">新增</el-button>
    </div>

    <div class="biao">
      <vxe-table border show-overflow ref="xTable" :column-config="{ resizable: true }" :loading="loading"
        :data="tableData" :edit-config="{ trigger: 'manual', mode: 'row' }">
        <vxe-column type="seq" title="序号" width="60"></vxe-column>

        <vxe-column field="date12" title="填写日期" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-input v-model="row.date12" type="date" placeholder="请选择日期" transfer></vxe-input>
          </template>
        </vxe-column>

        <vxe-column field="name" title="护理等级变更原因" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-input v-model="row.name" type="text"></vxe-input>
          </template>
        </vxe-column>

        <vxe-column field="role" title="评估小组签字" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-input v-model="row.role" type="text" placeholder="请输入昵称"></vxe-input>
          </template>
        </vxe-column>

        <vxe-column field="role" title="变更护理服务等级" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-input v-model="row.role" type="text" placeholder="请输入昵称"></vxe-input>
          </template>
        </vxe-column>

        <vxe-column field="role" title="变更后护理费用" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-input v-model="row.role" type="text" placeholder="请输入昵称"></vxe-input>
          </template>
        </vxe-column>

        <vxe-column field="role" title="负责人签字" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-input v-model="row.role" type="text" placeholder="请输入昵称"></vxe-input>
          </template>
        </vxe-column>

        <vxe-column field="role" title="入住或家属签字" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-input v-model="row.role" type="text" placeholder="请输入昵称"></vxe-input>
          </template>
        </vxe-column>
        <vxe-column field="role" title="备注" :edit-render="{}">
          <template #edit="{ row }">
            <vxe-input v-model="row.role" type="text" placeholder="请输入昵称"></vxe-input>
          </template>
        </vxe-column>

        <vxe-column title="操作" width="160">
          <template #default="{ row }">
            <template v-if="isActiveStatus(row)">
              <vxe-button @click="saveRowEvent(row)">编辑</vxe-button>
              <vxe-button @click="cancelRowEvent(row)">删除</vxe-button>
            </template>
            <template v-else>
              <vxe-button @click="editRowEvent(row)">打印</vxe-button>
            </template>
          </template>
        </vxe-column>
      </vxe-table>
    </div>

    <div class="zeng">
      <el-dialog v-model="dialogFormVisible" title="新增护理等级变更" width="500">
        <el-form :model="form">
          <el-form-item label="日期" :label-width="formLabelWidth">
            <el-date-picker v-model="form.data" type="date" placeholder="选择日期" :size="size" />
          </el-form-item>

          <el-form-item label="护理变更原因" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>

          <el-form-item label="评估小组签字" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>

          <el-form-item label="变更护理服务等级" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>

          <el-form-item label="变更后护理费用" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>

          <el-form-item label="负责人签字" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>

          <el-form-item label="入住者或家属签字" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>

          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="dialogFormVisible = false">
              保存
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
  
  
<script setup>
import { reactive, ref } from "vue";

const dialogTableVisible = ref(false);
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

const gridData = [
  {
    date: "2016-05-02",
    name: "John Smith",
    address: "No.1518,  Jinshajiang Road, Putuo District",
  },
  {
    date: "2016-05-04",
    name: "John Smith",
    address: "No.1518,  Jinshajiang Road, Putuo District",
  },
  {
    date: "2016-05-01",
    name: "John Smith",
    address: "No.1518,  Jinshajiang Road, Putuo District",
  },
  {
    date: "2016-05-03",
    name: "John Smith",
    address: "No.1518,  Jinshajiang Road, Putuo District",
  },
];
</script>
  
  
<style scoped>
.head {
  width: 75%;
  height: 40px;
  margin: 0 auto;
}

.nav1 {
  width: 80%;
  height: 30px;
  margin: 20px auto;
  padding: 20px;
}

.mx-1 {
  font-size: 16px;
  margin: 100px;
}

.bz {
  width: 80%;
  margin: 0 auto;
  padding: 30px 0;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.biao {
  width: 80%;
  height: 800px;
  margin: 0 auto;
}
</style>